import React, { Component } from 'react'
import './less/me.less'
import chatData from './data/chatData'
import Layout from '#components/Layout/Layout'
import { NavLink, withRouter } from 'react-router-dom'

@withRouter
class Me extends Component {
  constructor(props) {
    super(props)
    this.state = {
      scrollTop: 0,
      isTyping: false,
      typedText: '',
      chatList: [
        {
          from: 'svenHHHH',
          text: '有新人加群了，我去处理一下',
          avatar: require('./avatar/胡嘉伟.jpg')
        },
        {
          from: '小爱哥',
          text: '快拉进来看看！',
          avatar: require('./avatar/小爱哥.jpg')
        }
      ]
    }
    this.chatWindow = React.createRef()
    this.chatList = React.createRef()
    this.timer = null
    this.timer2 = null
    this.timer3 = null
    this.timer4 = null
    this.timer5 = null
    this.timer6 = null
  }

  componentDidMount() {
    var mask = document.querySelector('.loading-mask')
    this.timer = setTimeout(() => {
      mask.classList.add('close')
      this.timer2 = setTimeout(() => {
        mask.parentNode.removeChild(mask)
        this.startChat()
      }, 200)
    }, 1200)
  }

  componentWillUnMount() {
    alert(1)
    this.timer = null
    this.timer2 = null
    this.timer3 = null
    this.timer4 = null
    this.timer5 = null
    this.timer6 = null
    clearTimeout(this.timer)
    clearTimeout(this.timer2)
    clearTimeout(this.timer3)
    clearTimeout(this.timer4)
    clearTimeout(this.timer5)
    clearTimeout(this.timer6)
  }

  scrollToEnd() {
    var nodeOuter = this.chatWindow
    var nodeInner = this.chatList
    this.setState({
      scrollTop: Math.max(
        nodeInner.current.clientHeight - nodeOuter.current.clientHeight,
        0
      )
    })
  }

  setNormalScroll() {
    var nodeOuter = this.chatWindow
    var nodeInner = this.chatList
    nodeOuter
    this.timer3 = setTimeout(function() {
      nodeOuter.classList.add('normal-scroll')
      nodeOuter.scrollTop = nodeInner.clientHeight - nodeOuter.clientHeight
    }, 500)
  }

  startChat() {
    const chatItem = () => {
      if (chatData.length) {
        // typed
        var newItem = chatData.shift()
        const sendMsg = () => {
          this.setState({
            chatList: [...this.state.chatList, newItem]
          })
          this.scrollToEnd()
          // 进入下一次聊天
          chatItem()
        }
        if (newItem.from === '胡至炜' && !!newItem.text) {
          this.typed(
            newItem.text,
            text => {
              this.setState({
                typedText: text,
                isTyping: true
              })
            },
            () => {
              this.setState({
                typedText: '',
                isTyping: false
              })
              sendMsg()
            }
          )
        } else {
          this.timer4 = setTimeout(sendMsg, 1500)
        }
      } else {
        this.setNormalScroll()
      }
    }
    chatItem()
  }

  typed(text, stepCallback, onEnd) {
    var sliceLength = 0
    function step() {
      sliceLength++
      stepCallback(text.slice(0, sliceLength))
      if (sliceLength >= text.length) {
        this.timer5 = setTimeout(onEnd, 700)
      } else {
        this.timer6 = setTimeout(step, 140)
      }
    }
    setTimeout(step, 1000)
  }

  render() {
    console.log(this.props)
    return (
      <div className="aboutPage moveIn">
        {/* <div className="aboutPage-main-header_content_avatar">
          <a href="" onClick={() => {this.props.history.push('/list')}}>Back</a>
        </div> */}
        <div id="aboutPage-chat">
          <div className="chat-window" ref={this.chatWindow}>
            <div
              className="chat-list"
              ref={this.chatList}
              style={{
                transform: 'translateY(' + -this.state.scrollTop + 'px)'
              }}
            >
              {this.state.chatList.map((chatItem, chatKey) => {
                return (
                  <div className="chat-item" key={chatKey}>
                    {chatItem.from === 'system' ? (
                      <div className="system-msg">
                        <div className="msg">{chatItem.text}</div>
                      </div>
                    ) : (
                      <div
                        className={`${
                          chatItem.from === '胡至炜'
                            ? 'chat-item-me'
                            : 'chat-item-other'
                        }`}
                      >
                        <span
                          className="avatar"
                          style={{ backgroundImage: `url(${chatItem.avatar})` }}
                        ></span>
                        <div className="content">
                          <div className="nickname">{chatItem.from}</div>
                          <div className="content-body">
                            <div className="text">
                              {chatItem.text ? (
                                chatItem.text
                              ) : (
                                <div
                                  className="image"
                                  style={{
                                    backgroundImage: `url(${chatItem.image})`
                                  }}
                                ></div>
                              )}
                              {/* <div className="image"></div> */}
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          </div>
          <div className="chat-footer">
            <div className="input-bar">
              <div className="typed-area">{this.state.typedText}</div>
            </div>
            <div className="sound-input">
              <div className="sound-wave">
                <span className="line1"></span>
                <span className="line2"></span>
                <span className="line3"></span>
                <span className="line4"></span>
              </div>
              <div className={`mask ${this.state.isTyping ? 'hidden' : ''}`}>
                讯飞语音输入法
              </div>
            </div>
          </div>
          <div className="loading-mask">
            <div className="text">
              <p>正在加入群聊...</p>
              <h3>欢迎来到我的世界</h3>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default Layout(Me)
